<template>
  <view class="rank-tabs">
    <view 
      class="tab-item" 
      :class="{ active: activeTab === 'week' }"
      @click="handleTabClick('week')"
    >
      <text class="tab-text">周排行</text>
    </view>
    <view class="tab-divider"></view>
    <view 
      class="tab-item" 
      :class="{ active: activeTab === 'month' }"
      @click="handleTabClick('month')"
    >
      <text class="tab-text">月排行</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "RankTabs",
  props: {
    // 默认激活的选项卡
    value: {
      type: String,
      default: 'week',
      validator: (value) => ['week', 'month'].includes(value)
    }
  },
  data() {
    return {
      activeTab: this.value
    };
  },
  watch: {
    value(newVal) {
      this.activeTab = newVal;
    }
  },
  methods: {
    // 处理选项卡点击
    handleTabClick(tab) {
      if (this.activeTab !== tab) {
        this.activeTab = tab;
        this.$emit('input', tab);
        this.$emit('change', tab);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.rank-tabs {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
  border-radius: 12rpx;
  padding: 4rpx;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.1);
  
  // 星空背景效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10rpx;
    background-image: 
      radial-gradient(1rpx 1rpx at 20% 30%, rgba(255, 255, 255, 0.3) 50%, transparent 50%),
      radial-gradient(1rpx 1rpx at 60% 70%, rgba(255, 255, 255, 0.3) 50%, transparent 50%),
      radial-gradient(1rpx 1rpx at 80% 20%, rgba(255, 255, 255, 0.3) 50%, transparent 50%),
      radial-gradient(1rpx 1rpx at 40% 80%, rgba(255, 255, 255, 0.3) 50%, transparent 50%);
    pointer-events: none;
  }
}

.tab-item {
  flex: 1;
  // min-width: 120rpx;
  padding: 0rpx 28rpx;
  text-align: center;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  
  // 未选中状态
  background: transparent;
  
  &.active {
    // 选中状态
    background: #ffffff;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    
    .tab-text {
      color: #333333;
      font-weight: 500;
    }
  }
  
  // 点击效果
  &:active {
    transform: scale(0.98);
  }
}

.tab-text {
  font-size: 24rpx;
  color: #8c8c8c;
  font-weight: 400;
  transition: all 0.3s ease;
  
  .tab-item.active & {
    color: #333333;
  }
}

.tab-divider {
  width: 1rpx;
  height: 20rpx;
  background: rgba(24, 144, 255, 0.2);
  margin: 0 4rpx;
}

// // 不同尺寸变体
// .rank-tabs {
//   // 小尺寸
//   &.small {
//     .tab-item {
//       padding: 12rpx 24rpx;
//       min-width: 100rpx;
//     }
    
//     .tab-text {
//       font-size: 24rpx;
//     }
//   }
  
//   // 大尺寸
//   &.large {
//     .tab-item {
//       padding: 20rpx 40rpx;
//       min-width: 140rpx;
//     }
    
//     .tab-text {
//       font-size: 28rpx;
//     }
//   }
// }

// // 禁用状态
// .rank-tabs.disabled {
//   opacity: 0.6;
//   pointer-events: none;
// }


</style>